import React from 'react';
import { motion } from 'framer-motion';
import { useAuth } from '../contexts/AuthContext';
import TextToImageDesign from '../components/TextToImageDesign';

const ProfileTextToImage: React.FC = () => {
  const { user } = useAuth();

  const handleDesignCreated = (imageUrl: string) => {
    console.log('Design created:', imageUrl);
    // Additional logic can be added here if needed
  };

  const handleCreditsUpdated = () => {
    console.log('Credits updated');
    // Additional logic can be added here if needed
  };

  if (!user) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Please log in to create designs</h2>
          <p className="text-gray-600">You need to be logged in to use the text-to-image feature.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Text to Image</h1>
          <p className="text-xl text-gray-600">Create stunning designs from text descriptions</p>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="max-w-6xl mx-auto"
        >
          <TextToImageDesign 
            onDesignCreated={handleDesignCreated}
            onCreditsUpdated={handleCreditsUpdated}
          />
        </motion.div>
      </div>
    </div>
  );
};

export default ProfileTextToImage;